// 第几个json
var page = 1;

function loadXMLDoc() {
	var xmlhttp;
	if (window.XMLHttpRequest) {
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp = new XMLHttpRequest();
	} else {
		// IE6, IE5 浏览器执行代码
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var json = JSON.parse(xmlhttp.responseText);
			// console.log(json.shop);
			// 对数组进行循环

			for (let i = 0; i < json.shop.length; i++) {
				console.log(json.shop[i])
				// 创建HTML结构
				var img = document.createElement('img');
				img.src = json.shop[i].pic;
				var h3 = document.createElement('h3');
				h3.innerHTML = json.shop[i].tille;
				var p = document.createElement('p');
				p.innerHTML = json.shop[i].desc;
				var p2 = document.createElement('p');
				p2.innerHTML = "￥";
				var span = document.createElement('span');
				span.innerHTML = json.shop[i].price;
				p2.appendChild(span);
				var del=document.createElement('del');
				del.innerHTML=json.shop[i].pricedel;
				span.appendChild(del);
				var div = document.createElement('div');
				div.appendChild(img);
				div.appendChild(h3);
				div.appendChild(p);
				div.appendChild(p2);
				console.log(div);
				// 把所有div追加到#list里面
				document.querySelector("#list").appendChild(div)
			}

		}
	}

	xmlhttp.open("GET",page + ".json", true);
	xmlhttp.send();
}
loadXMLDoc()

document.querySelector("#btn").addEventListener('click', function() {

	if (page >= 4) {
		page = 1;

	} else {
		page++;
	}
	// 先清空
	document.querySelector("#list").innerHTML = '';
	// 再取数据到#list里
	loadXMLDoc();
})
